<style>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        /*border: 1px solid #eee;*/
    }
</style>
<template>
    <card>
        <p slot="title">
            <Icon type="compose"></Icon>
            角色信息
        </p>
        <Form :model="formItem" label-width="120">
            <Row type="flex" justify="center">
                <Col :span="5">
                    <FormItem label="角色代码：">
                        <Input v-model="formItem.roleCode" size="large" placeholder="请输入角色代码">
                            <Icon type="information-circled" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </Col>
                <Col :span="5">
                    <FormItem label="角色名称：">
                        <Input v-model="formItem.roleName" size="large" placeholder="请输入角色名称">
                            <Icon type="information-circled" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </Col>
            </Row>
            <Row type="flex" justify="center">
                <Col :span="10">
                    <FormItem label="角色描述：">
                        <Input :rows="4" :autosize="{minRows: 4}" v-model="formItem.roleDesc" type="textarea" placeholder="请输入角色描述..."></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row type="flex" justify="center">
                <Col :span="10">
                    <FormItem>
                        <Button @click="save" size="large" type="primary">保存</Button>
                        <Button @click="close" size="large" type="ghost" style="margin-left: 8px">关闭</Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <Spin size="large" fix v-if="spinShow">
            <!--<slot></slot>-->
        </Spin>
    </card>
</template>

<script>
export default {
    data () {
        return {
            baseURL: '/user/role',
            spinShow: false,
            formItem: {
                roleCode: '',
                roleName: '',
                roleDesc: ''
            }
        }
    },
    methods: {
        init () {
            this.$bus.init(this.formItem)
        },
        save () {
            this.spinShow = true
            let url = this.baseURL + '/saveOrUpdate'
            this.$ajax.post(url, this.formItem).then(function (response) {
                let data = response.data
                if (data.code === 0) {
                    setTimeout(function () {
                        this.init()
                        this.spinShow = false
                        this.$bus.alert('success', '角色创建成功', 3)
                    }.bind(this), 1000)
                } else {
                    this.error(data.msg)
                }
            }.bind(this))
        },
        close () {
            this.$bus.closePageToLink()
        }
    }
}
</script>

<style>
</style>
